<template>
	<view>
		<u-navbar title-bold title-size="36" title="法海广场"></u-navbar>
		<view class="sx-div u-m-t-4 flex_only">
			<view class="sx-t">
				热门领域：
			</view>
			<view class="flex flex_wrap sx-d">
				<view class="sx-item" :class="sxIndex==''?'sx-item-sel':''" @click="search('')">
					全部
				</view>
				<view class="sx-item" v-for="(item,index) in list" :key="index" :class="sxIndex==item.id?'sx-item-sel':''"
					@click="search(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="pro-div flex flex_sb flex_wrap">
			<view class="pro-item" v-for="(item,index) in fhlist" :key="index" @click="tidetail(item)">
				<view class="pro-img">
					<image v-if="item.images && item.images.length>0"  class="pro-item-img" :src="item.images[0]" mode="aspectFill"></image>
					<image v-if="item.video" class="pro-item-bf" src="../../static/img/home/bofang-icon.png" mode=""></image>
				</view>
				<view class="u-m-t-12">
					<view class="line_1 textitl">
						{{item.title}}
					</view>
					<view class="flex u-m-t-12">
						<image class="headimg" :src="item.lawyer_avatar" mode=""></image>
						<view class="u-m-l-8 font_12_999">
							{{item.lawyer_name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				sxIndex: '',
				fhlist:[],
				
				total:0,
				pageNum:1,
				pageSize:10,
			}
		},
		onLoad() {
			this.lingyuList()
			this.getlist()
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getlist()
			}
		},
		methods: {
			search(e){
				this.pageNum = 1
				this.sxIndex = e
				this.getlist()
			},
			getlist(){
				this.$api({
					url: '/lawyer/getSeaList',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						lawyer_id: -1,
						tag1_id:this.sxIndex,
						page:this.pageNum,
						limit:this.pageSize,
					},
				}).then(res => {
					if (res.code == 1) {
						// this.fhlist = res.data.list
						
						this.total=res.data.count
						let data = res.data.list
						if (this.pageNum == 1) {
							this.fhlist = data
						} else {
							this.fhlist = [...this.fhlist, ...data]
						}
					}
				})
			},
			lingyuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			tidetail(e){
				uni.navigateTo({
					url:"/pages/index/fahaiDetail?id="+e.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wid100{
		width: 100%;
	}
	.sx-div {
		width: 750rpx;
		padding: 32rpx;
		background: #FFFFFF;
		padding-top: 0;

		.sx-t {
			width: 140rpx;
			margin-top: 32rpx;
		}

		.sx-d {
			width: 546rpx;
		}

		.sx-item {
			font-size: 24rpx;
			color: #333333;
			// margin-left: 40rpx;
			margin-top: 18rpx;
			padding: 12rpx 20rpx;
			border: 2rpx solid #fff;

			&-sel {
				// width: 136rpx;
				// height: 56rpx;
				background: #FFEBEB;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FF9D9D;
				font-size: 24rpx;
				color: #F7191A;

			}
		}
	}
	
	.pro-div{
		padding: 32rpx;
		.pro-item{
			margin-bottom: 32rpx;
			.pro-img{
				position: relative;
				width: 332rpx;
				height: 440rpx;
				border-radius: 8rpx;
				
				.pro-item-img{
					position: absolute;
					top: 0;
					left: 0;
					width: 332rpx;
					height: 440rpx;
					border-radius: 8rpx;
					background: #eee;
				}
				.pro-item-bf{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.textitl{
				width: 332rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			.headimg{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}
</style>